<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 100px;
        height: 2000px;
        background: red;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <button>点击我设置卷去的高度</button>
    <script>
      // 滚动事件；
      window.onscroll = function () {
        //scrollTop参数是距离顶部的距离，也是滚动距离 是一个变量  document.body.scrollTop = 0; 赋值让他为0就可以到顶部
        console.log(document.body.scrollTop);
      };

      var btn = document.querySelector("button");

      // document.documentElement.scrollTop 1.获取卷去的高度； 2.设置卷去的高度；
      btn.onclick = function () {
        // document.documentElement.scrollTop = 0;
        document.body.scrollTop = 0;
      };

      // 注意 ：在chrome浏览器下 ：如果有文档声明 通过 document.documentElement.scrollTop 设置或者获取卷去的高度；
      // 如果没有文档声明 通过 document.body.scrollTop 来设置或者获取卷去的高度

      /* 
            ie底下 ： 没有文档声明  那么 document.documentElement.scrollTop和document.body.scrollTop 都可以设置或者获取
                    有文档声明：document.documentElement.scrollTop可以获取或者设置 document.body.scrollTop不能获取或者设置；
        
        */
    </script>
  </body>
</html>
